<template>
    <div style="margin: 10px;">
      <el-card shadow="hover">
        <!--1. 查询学生栏-->
        <el-form :inline="true" :model="studentSearch" class="demo-form-inline">
          <el-form-item >
            <el-input v-model="studentSearch.sname" placeholder="学生姓名"></el-input>
          </el-form-item>
          <el-form-item >
            <el-input v-model="studentSearch.addr" placeholder="学生住址"></el-input>
          </el-form-item>
          <el-form-item >
            <el-select v-model="studentSearch.cid" placeholder="所在班级">
              <el-option label="所有班级" value="0"></el-option>
              <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="search" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>

        <!--2. 列表学生栏-->
        <el-table
          :data="students"
          style="width: 100%">
          <el-table-column
            align="center"
            label="学生编号"
            prop="sid">
          </el-table-column>
          <el-table-column
            align="center"
            label="学生姓名"
            prop="sname">
          </el-table-column>
          <el-table-column
            align="center"
            label="性别"
            prop="sex">
          </el-table-column>
          <el-table-column
            align="center"
            label="年龄"
            prop="age">
          </el-table-column>
          <el-table-column
            align="center"
            label="住址"
            prop="addr">
          </el-table-column>
          <el-table-column
            align="center"
            label="班级"
            prop="cname">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--3. 分页导航栏-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[7, 14, 21, 28]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

      </el-card>
    </div>
</template>

<script>
  import {findStudents,findByPage,search} from "@/api/student";
  import {findClasses} from "@/api/classes";

  export default {
    data() {
      return {
        students:[],
        page:1,
        pageSize:7,
        total:100,
        classes:[],
        studentSearch:[],
      }
    },
    created() {
      /* 1. 查血所有学生*/
      // this.findStudents();
      // 2. 进行分页查询
      // this.findByPage();
      // 3. 查询班级
      this.findClasses();

    },
    methods: {
      // 1. 查询学生
      findStudents(){
        findStudents().then(({data})=>{
          this.students = data.students;
          console.log(data)
        })
      },
      // 2.分页查询
      findByPage() {
        findByPage(this.page,this.pageSize).then(({data})=>{
          console.log(data);
          this.students = data.pr.rows;
          this.total = data.pr.total;
        })
      },
      // 3. 查询班级
      findClasses(){
        findClasses().then(({data})=>{
          console.log(data);
          this.classes=data.list;
        })
      },
      // 4. 条件查询带分页
      search(){

      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(pageSize) {
        this.pageSize=pageSize;   // 注意要赋值
        console.log(`每页 ${pageSize} 条`);
        this.findByPage();
      },
      handleCurrentChange(page) {
        this.page=page;           // 注意要赋值
        console.log(`当前页: ${page}`);
        this.findByPage();
      }
    },

  }
</script>

<style scoped>
    .el-pagination{
      text-align: right;
      margin-top: 20px;
    }
</style>
